<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

    <style>
        section{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 10px auto;
            overflow: hidden;
        }

        section>div{
            width: 2000px;
            height: 300px;
            border: 1px solid tomato;
            /*这里设置的属性：动画名 动画持续时间 动画循环次数 动画间隔时间*/
            animation: myname 10s infinite 1s;

        }

        @keyframes myname {
            35%{
                margin-left: -500px;
            }

            70%{
                margin-left: -1000px;
            }

            100%{
                margin-left: -1500px;
            }

        }



        section img{
            width: 500px;
            height: 300px;
            float: left;
        }

    </style>




</head>
<body>


<section>
    <div>
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
    </div>
</section>


</body>
</html>